<template>
  <div class="app">
    <img class="bg" :src="pic" alt="" />
    <img class="pan" src="../../assets/pan.png" alt="" />
    <img class="x" :src="pic" alt="" />
    <h1 class="title">{{ title }}</h1>
    <audio :src="play" controls preload></audio>
  </div>
</template>

<script>
export default {
  data() {
    return {
      play: "",
      pic: "",
      title: "",
    };
  },
  mounted() {
    var pic = localStorage.getItem("pic");
    this.pic = pic;
    var { id } = this.$route.query;
    var { name } = this.$route.query;
    this.title = name;
    this.$http(`http://47.108.197.28:3000/song/url?id=${id}`).then((res) => {
      console.log(res.data.data[0].url);
      this.play = res.data.data[0].url;
    });
  },
};
</script>

<style scoped>
.app {
  width: 10rem;
  margin: auto;
  overflow: hidden;
}
.x {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  top: 30%;
}
audio {
  bottom: 20%;
}
.bg {
  height: 100%;
  width: 750px;
  top: 0;
  opacity: 0.5;
  z-index: 0;
}
.pan {
  width: 400px;
  top: 21%;
}
.title {
  bottom: 40%;z-index: 2;
}
.pan,
.bg,
audio,
.x,
.title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
</style>